<template>
  <div id="header">
    <el-row justify="space-between"
            align="middle">
      <el-col :span="6">
        <el-icon :size="35"
                 v-show="$store.state.isCollapse">
          <expand @click="isShowAside" />
        </el-icon>
        <el-icon :size="35"
                 v-show="!$store.state.isCollapse">
          <fold @click="isShowAside" />
        </el-icon>
      </el-col>
      <el-col :span="6">
        你好啊！
        <el-dropdown>
          <span class="el-dropdown-link">
            {{$store.state.userInfo.username}}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>修改信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登陆</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import { Setting, Expand, Fold, Edit, Plus } from '@element-plus/icons-vue'
import { useStore } from "vuex";
export default defineComponent({
  name: 'header',
  components: { Setting, Expand, Fold, Edit, Plus },
  setup() {
    const store = useStore()
    // 点击icon控制aside是否显示完全
    const isShowAside = () => {
      console.log('click');
      store.commit('showAside')
    }
    return {
      isShowAside
    }
  }

})
</script>

<style scoped lang="less">
.el-dropdown {
  cursor: pointer;
}
</style>
